// @ts-nocheck
export default {
    data: {
        verificationState: '', // 滑块验证状态
        selectIdiomList: [], // 选中的验证文字
        currentText: [], // 当前选中文字
        textList: [],// 验证文字
        imgUrl: '', // 背景图片
        verificationStateStyle: {
            color: '#222222',
            backgroundColor: '248,248,248',
            text: '请依次点击'
        }, // 滑块验证状态样式属性

    },
    props: {
        imgList: {// 验证主图地址列表
            default: [
                '/common/images/bg/img1.jpg',
                '/common/images/bg/img2.jpg',
                '/common/images/bg/img3.jpeg',
                '/common/images/bg/img4.jpeg'
            ],
            type: Array
        },
        idiomList: {// 验证文字列表
            default: ['花好月圆', '蒸蒸日上', '今日说法', '明天会更好'],
            type: Array
        },
        imgWidth: {// 图片宽度
            default: 338,
            type: Number
        },
        imgHeigth: {// 图片高度
            default: 230,
            type: Number
        },
        showTextLength: {// 验证的文字长度
            default: 3,
            type: Number
        },
        isRandom: {// 是否随机打乱
            default: false,
            type: Boolean
        }
    },
    onInit(){
        this.updataVerification(); // 更新验证数据
        this.$watch('verificationState', '_setverificationStateColor')
    },
    updataVerification() {
//        初始化数据
        this.verificationState = '';
        this.currentText = [];
//        随机取成语中的任意一个
        let selectIdiomList = this.idiomList[this._randomNum(0, this.idiomList.length)].split('');
        let showTextLength = this.showTextLength;// 验证文字的长度
//       如果需要字符打乱，执行下方
        if (this.isRandom) {
            selectIdiomList.sort(() => {
                return Math.random()
            })
        }
        this.selectIdiomList = selectIdiomList.slice(0, showTextLength);
        const textList = [];
        selectIdiomList.forEach((item, index) => {
            const data = {};
            data.text = item;// 文字
            data.fontSize = this._randomNum(26, 35);// 文字字体大小
            data.color = this._randomColor(50, 200);// 文字颜色
            data.left = this._randomNum(index * (this.imgWidth / (selectIdiomList.length + 1)), (index + 1) * (this.imgWidth / (selectIdiomList.length + 1)));// 文字距离左边定位
            data.top = this._randomNum(30, this.imgHeigth - 50);// 文字距离顶部定位
            data.deg = this._randomNum(-60, 60);
            data.numble = 0;// 文字点击顺序
            textList.push(data);
        })
        this.textList = textList;
        this.imgUrl = this.imgList[this._randomNum(0, this.imgList.length)];// 随机背景颜色
    },
    signText(item) {
//        过滤成功元素和失败元素
        if (this.verificationState === 'success' || this.verificationState === 'error') return false;
//        过滤已点击元素
        if (item.numble !== 0) return false;
        this.currentText.push(item.text)
        item.numble = this.currentText.length;
        if (this.currentText.length === this.selectIdiomList.length) {
            this.verification();
        }
    },
//    验证方法
    verification() {
        const state = this.selectIdiomList.every((item, index) => {
            return item === this.currentText[index]
        })
        if (state) {
            this.verificationState = 'success';
            this.$emit('verificationSuccess');
        } else {
            this.verificationState = 'error';
            this.$emit('verificationError');
            setTimeout(() => {
                this.currentText = [];
                this.textList.forEach(item => item.numble = 0);
                this.verificationState = '';
            }, 2000);
        }
    },
//    生成一个随机数
    _randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
    },
//    生成一个随机颜色
    _randomColor(max, min) {
        let r = this._randomNum(max, min)
        let g = this._randomNum(max, min)
        let b = this._randomNum(max, min)
        return `rgb(${r},${g},${b})`
    },
//    设置不同状态样式
    _setverificationStateColor() {
        let color = this.verificationStateStyle;
        console.log('修改样式')
        switch(this.verificationState) {
            case '':
            color = {
                color: '#222222',
                backgroundColor: '248,248,248',
                text: '请依次点击'
            }
            break;
            case 'success':
            color = {
                color: '#2575fc',
                backgroundColor: '37,117,252',
                text: '√ 验证成功'
            }
            break;
            case 'error':
            color = {
                color: '#DC143C',
                backgroundColor: '220,20,60',
                img: 'noCheck',
                text: 'X 验证失败'
            }
            break;
        }
        this.verificationStateStyle = color;
    }
}
